﻿@{
    ViewBag.Title = "TreeData";
    Layout = "~/Views/Share/_Layout.cshtml";
}

@section css{
    <link href="~/Content/jqtree/jqtree.css" rel="stylesheet" />
}

@section head{
        
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">工具</a>
                </li>
                <li class="active">
                    <strong>基础-树形数据</strong>
                </li>
            </ol>
        </div>

}

<div class="row">
    <div class="col-md-2" style="padding:0px;">
        <div class="panel panel-primary">
            <div class="panel-heading">Data Of Tree</div>
            <div id="tree1" class="h6"></div>
            <div class="panel-body">
            </div>
        </div>
        
    </div>
    <div class="col-md-10" style="padding-right:0px;">        
        <div class="panel panel-primary">
            <div class="panel-heading"><strong id="panel-operate-title">Data Of Tree Modify</strong></div>
            <div class="panel-body h6" style="margin:0px;" id="panel-form">
                <div class="col-sm-6">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="txtparentno" class="col-sm-2 control-label">上级编号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtparentno" placeholder="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtlabel" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtlabel" placeholder="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtno" class="col-sm-2 control-label">编号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtno" placeholder="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtremark" class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="txtremark"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txttype" class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txttype" placeholder="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtlevel" class="col-sm-2 control-label">层级</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtlevel" placeholder="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtordernum" class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtordernum" placeholder="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtv1" class="col-sm-2 control-label">Value1</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="txtv1"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtv2" class="col-sm-2 control-label">Value2</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="txtv2"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtv3" class="col-sm-2 control-label">Value3</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="txtv3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="btnSave" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <button id="btnSave" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Save</button>
                                <small id="msg" class="label label-danger"> </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/Content/jqtree/tree.jquery.js"></script>
    <script src="~/Content/grid/src/noke.grid.v1.2.js"></script>
    <script>
        $(function () {
            new ttree();
        });

        function ttree() {
            var thisobj = this;
            this.$tree = $('#tree1');
            this.target = 'DIV';

            var init = function () {
                initTree();
                
                $('#btnSave').click(function () { save(); });
            }

            var initTree = function (isreload) {
                
                var url = '/Home/GetTreeList/';
                $.getJSON(url, function (res) {
                    if (res) {
                        if (isreload) {
                            thisobj.$tree._loadData(res, null);
                            return false;
                        }
                        bindTree(res);
                    } else {
                        console.log('Get:' + res.Msg);
                    }
                }, 'json');
            }
            
            var bindTree = function (treeData) {
                var data = [convertToTree(treeData)];
                thisobj.$tree.tree({
                    data: data,
                    autoOpen: 1,
                    onCreateLi: function (node, $li) {
                        var edit = '&nbsp;&nbsp;&nbsp;', args = ['plus', '添加'];//'trash',, '删除'
                        for (var i = 0; i < (args.length/2); i++) {
                            if (((i == 1 || i == 2) && node.no == 0) || (i == 2 && node.children.length > 0)) { continue; }
                            edit += '<a hraf="#node-' + node.no + '" data-node-id="' + node.no + '" class="btn btn-link btn-xs" aria-label="' + args[i + 4] + '"><span class="glyphicon glyphicon-' + args[i] + '" aria-hidden="true"></span></a>';
                        }
                        $li.find('.jqtree-element').append(edit);
                    }
                }).bind('tree.click', function (e) { operate(e, 'item'); })
                .on('click', '.glyphicon-plus', function (e) { operate(e, 'add'); })
                .on('click', '.glyphicon-trash', function (e) { operate(e, 'delete'); });
            }

            var operate  = function (e, type) {
                if (type == 'item') {
                    if (thisobj.target != e.target.nodeName) {
                        thisobj.target = e.target.nodeName; // e.target.nodeName=='DIV'
                        return true;
                    }
                    loadform(e.node);
                } else {
                    thisobj.target = e.target.nodeName; // e.target.nodeName=='SPAN'
                    var $a = $(e.target).parent(), node_id = $a.data('node-id');
                    var node = thisobj.$tree.tree('getNodeById', node_id);
                    if (node) {
                        switch (type) {
                            case 'add': loadform_add(node); break;
                            case 'delete': thisobj.deptobj.Delete(); break;
                        }
                    }
                }
            }

            var loadform = function (model) {

                $('#msg').text('');
                $('#txtno').val(model.no);
                $('#txtlevel').val(model.level);
                $('#txtordernum').val(model.ordernum);
                $('#txtparentno').val(model.parentno);
                $('#txttype').val(model.type);
                $('#txtlabel').val(model.name);
                $('#txtremark').val(model.remark);
                $('#txtv1').val(model.v1);
                $('#txtv2').val(model.v2);
                $('#txtv3').val(model.v3);
                $('#panel-form').show();
                $('#panel-operate-title').text('编辑');

            };

            var loadform_add = function (model) {
                $('#msg').text('');
                $('#txtno').val('');
                $('#txtlevel').val(model.level + 1);
                $('#txtordernum').val(999999);
                $('#txtparentno').val(model.no);
                $('#txttype').val(model.type);
                $('#txtlabel').val('');
                $('#txtremark').val('');
                $('#txtv1').val('');
                $('#txtv2').val('');
                $('#txtv3').val('');
                $('#panel-form').show();
                $('#panel-operate-title').text('添加');
            };

            var save = function () {
                $('#msg').text('');
                var model = {};
                model.no = $('#txtno').val();
                model.level = parseInt($('#txtlevel').val());
                model.ordernum = parseInt($('#txtordernum').val());
                model.parentno = $('#txtparentno').val();
                model.type = parseInt($('#txttype').val());
                model.label = $('#txtlabel').val();
                model.remark = $('#txtremark').val();
                model.v1 = $('#txtv1').val();
                model.v2 = $('#txtv2').val();
                model.v3 = $('#txtv3').val();

                if (model.no == '' || model.label == '' || model.parentno == '' || model.level == '') {
                    alert('数据不完整');
                    return false;
                }

                var url = '/Home/SaveTree/';
                $.post(url, model, function (res) {
                    if (res == 100) {
                        $('#msg').text('Success !');
                        location.reload();
                    } else {
                        console.log('Save: ' + res.Msg);
                    }
                }, 'json');
            }

            // ****转换成树形结构 【BEGIN】***********************************************
            var convertToTree = function (treeData) {
                var root = { "id": "0", "no": "0", "parentno": "0", "label": "Root", "level": 0, "type": 0, "ordernum": 0, "remark": "Root", "v1": "", "v2": "", "v3": "", children: [] }, len = treeData.length, temp = {}, key = '', list = [], item = null, parent = null;
                for (var level = 0; level < len; level++) {
                    list = treeData[level];
                    for (var i = 0; i < list.length; i++) {
                        item = list[i], item.id = item.no;
                        parent = (level == 0) ? root : getParent(temp, item.parentno, root);
                        if (!parent || (parent.id == 0 && level != 0)) {
                            continue;
                        }
                        key = item.no;
                        temp[key] = (level == 0 ? '' : (temp[item.parentno] + '-')) + parent.children.length;
                        item.children = [];
                        parent.children.push(item);
                    }
                }
                return root;
            }
            var getParent = function (temp, pid, root) {
                if (temp[pid]) {
                    var ptemp = temp[pid].toString().split('-');
                    var parent = root;
                    $(ptemp).each(function (i, index) {
                        parent = parent.children[parseInt(index)];
                    })
                    return parent;
                }                
                return null;
            }
            // ****************** 【END】********************************

            init();
        }


    </script>

}